<template>
	<view style="background-color: #E7ECF4; height: 100%;">
			<view style="padding:10px 10px 200px;">
				<view style="font-size: 12px; color:#333; text-align: right;">{{time}}更新</view>
				<view style="text-align: center; padding-top: 20px;">
					<view style="font-size: 46px; ">
						<text style="position: relative; padding:10px;">{{indexes.aqiDisplay}}<text
								style="background-color: #FFEF01; border-radius: 50%; padding:5px 8px; font-size: 14px; position: absolute; top: 0px; right:-20px;">{{air.category}}</text></text>
	
					</view>
					<view style="padding: 10px 0;"><text
							style="font-size: 16px; background-color: #fff; color: #14C355; border-radius:8px; padding:5px;">AQI指数</text>
					</view>
					<view style="font-size: 13px; padding:10px 30px 20px;">{{indexes.health.effect}}</view>
					
				</view>
	<view
				style="font-size: 14px; padding: 10px; border-radius:5px; background-color: #fff; display: flex; text-align: center; ">
				<view style="width: 16.66%;">
					<view style="font-size: 16px;">{{air.pm10}}</view>PM10
				</view>
				<view style="width: 16.66%;">
					<view style="font-size: 16px;">{{air.pm2p5}}</view>PM2.5
				</view>
				<view style="width: 16.66%;">
					<view style="font-size: 16px;">{{air.no2}}</view>NO₂
				</view>
				<view style="width: 16.66%;">
					<view style="font-size: 16px;">{{air.so2}}</view>SO₂
				</view>
				<view style="width: 16.66%;">
					<view style="font-size: 16px;">{{air.o3}}</view>O₃
				</view>
				<view style="width: 16.66%;">
					<view style="font-size: 16px;">{{air.co}}</view>CO
				</view>
			</view>
			</view>
				

		</view>
	
	
</template>

<script>
	const APIKEY = '7cc94edca9f74113adc43d1822d933c0' ;// 填入你申请的KEY
		export default {
				data() {
					return {
						user: uni.getStorageSync('weather2024'),
							currenttime:'',
							location: '',
							now: '',
							hourly: '',
							daily: '',
							City: '',
							County: '',				
						indexes:'',
						air:'',
						time:'',
					}
				},
				onLoad() {
				this.getLocation();
					
				},
				methods: {
					/**
					 * 获取定位
					 */
					getLocation() {
						var that = this;
						uni.getLocation({
							type: 'gcj02',
							success(res) {
								that.location = res.longitude + ',' + res.latitude;
								that.latitude=res.latitude;
								that.longitude=res.longitude;
								that.getWeather();
								that.getCityByLoaction();
								that.getIndexes();
								that.getAir()
							},
							fail(err) {
								uni.showModal({
									title: '获取定位信息失败',
									content: '为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',
									success(mRes) {
										if (mRes.confirm) {
											uni.openSetting({
												success: function (data) {
													if (data.authSetting['scope.userLocation'] === true) {
														uni.showToast({
															title: '授权成功',
															icon: 'success',
															duration: 1000
														});
														that.getLocation();
													} else {
														uni.showToast({
															title: '授权失败',
															icon: 'none',
															duration: 1000
														});
														that.location = '地理位置';
														that.getWeather();
														that.getCityByLoaction();
													}
												},
												fail(err) {
													console.log(err);
													uni.showToast({
														title: '唤起设置页失败，请手动打开',
														icon: 'none',
														duration: 1000
													});
													that.location = '地理位置';
													that.getWeather();
													that.getCityByLoaction();
												}
											});
										} else if (mRes.cancel) {
											that.location = '地理位置';
											that.getWeather();
											that.getCityByLoaction();
										}
									}
								});
							}
						});
					},
					/**
					 * 根据坐标获取城市信息
					 */
					getCityByLoaction() {
						var that = this;
						uni.request({
							url:
								'https://geoapi.qweather.com/v2/city/lookup?key=' +
								APIKEY +
								'&location=' +
								that.location,
							success(result) {
								var res = result.data;
								if (res.code == '200') {
									var data = res.location[0];
									that.City = data.adm2;
									that.County = data.name;
								} else {
									uni.showToast({
										title: '获取城市信息失败',
										icon: 'none'
									});
								}
							}
						});
					},
					/**
					 * 获取天气
					 */
					getWeather() {
						var that = this;
						uni.showLoading({
							title: '加载中'
						});
					
						
						uni.request({
							url:
								'https://devapi.qweather.com/v7/weather/7d?key=' +
								APIKEY +
								'&location=' +
								that.location,
							success(result) {
								var res = result.data;
								
								that.daily = res.daily;
								uni.hideLoading();
							}
						});
					},
					getIndexes(){
						var that = this;
						uni.request({
							url:
								'https://devapi.qweather.com/airquality/v1/current/'+that.latitude+'/'+that.longitude+'/?key='+APIKEY ,
								success(result){
									console.log(result)
									var res=result.data;
												that.indexes=res.indexes[0];
								}
						});
					},
					getAir(){
						var that = this;
						uni.request({
							url:
								'https://devapi.qweather.com/v7/air/now?location=' +that.location+'&key=' + APIKEY,
								success(result){
									console.log(result)
									var res=result.data;
											that.air=res.now;
											that.time=res.updateTime
								}
						});
					},
					
	}
	}
</script>

<style>
	.card-modular {
		padding: 0 30rpx;
		margin-top: 30rpx;
	} 
	.card-modular > .title {
		font-size: 40rpx;
		font-weight: bolder;
		position: relative;
		margin-left: 14rpx;
		margin-bottom: 16rpx;
		font-family: "Times New Roman", Times, serif;
	} 
	.card-modular > .title::before {
		content: '';
		position: absolute;
		left: -14rpx;
		top: 10rpx;
		bottom: 10rpx;
		width: 8rpx;
		border-radius: 10rpx;
		background-color: #2f80ed;		
	}
	.card-modular .card-wrap {
		width: 690rpx;
		border-radius: 18rpx;
		background-color: #ffffff;
		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.2);
		overflow-x: auto;
		white-space: nowrap;
		font-family: "Times New Roman", Times, serif;
		font-weight: bolder;
	} 
	.card-modular .card-wrap .item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		padding: 18rpx 0;
		
	}
	.card-modular .card-wrap .item.hourly {
		width: 138rpx;
	}
	.card-modular .card-wrap .item.daily {
		width: 172.5rpx;
	}
	.card-modular .card-wrap .item .icon {
		width: 60rpx;
		height: 60rpx;
		margin: 64rpx 0;
	}
	 
	.card-modular .card-wrap .item .text-gray {
		color: gray;
		
	 }
	.card-modular .card-wrap .item .text-primary {
		color: #0000CD;
		font-size: 15px;
	}
	.p1{
		font-family: "Times New Roman", Times, serif;
		font-weight: bolder;
	}
	.title{
		 
			font-family: "Brush Script MT", "Lucida Handwriting", Cursive;
			font-weight: bolder;
			color: white;
			font-size: 30px;
				
		}
	.title2{
			 
			font-family: "Brush Script MT", "Lucida Handwriting", Cursive;
			font-weight: bolder;
			color: white;
			font-size: 22px;
			display: flex;
			justify-content: center;
			align-items: center;
			}
	.title4{
				 
			font-family: "Times New Roman", Times, serif;
			font-weight: bolder;
			color: white;
			font-size: 22px;
			display: flex;
			justify-content: center;
			align-items: center;
			}
	.title1{
				font-family: "Times New Roman", Times, serif;
				font-weight: bolder;
				color: white;
				font-size: 15px;
				
	      }
	 .title3{
		  	 
		  			font-family:  "Times New Roman", Times, serif;
		  			font-weight: bolder;
		  			color: white;
		  			font-size: 35px;
		  			display: flex;
		  			justify-content: center;
		  			align-items: center;
					margin-top: 10px;
		  	}
	.grid-item-box{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
	.p1{
					font-family: "Brush Script MT", "Lucida Handwriting", Cursive;
					font-weight: bolder;
					
				}
				scroll-view{
					white-space: nowrap;
				}
</style>